<template>

  <Card class="ll page-fill" style="height:900px">
    <div>贷款产品</div>
    <div id="middle">
      <v-form>
        <v-form-item label="产品名称:" labelWidth="200px">
          <v-input class="productName" v-model="productName" placeholder="" :disabled="productMark"></v-input>
        </v-form-item>
        <v-form-item label="产品首字母大写名称:" labelWidth="200px">
          <v-input class="titleName" v-model="titleCase" placeholder="" :disabled="titleMark"></v-input>
        </v-form-item>
        <v-form-item label="最小贷款金额:" labelWidth="200px">
          <v-input class="loanMinAmount" v-model="loanMinAmount" placeholder="" :disabled="allMark"></v-input>
        </v-form-item>
        <v-form-item label="最大贷款金额:" labelWidth="200px">
          <v-input class="loanMaxAmount" v-model="loanMaxAmount" placeholder="" :disabled="allMark"></v-input>
        </v-form-item>

        <v-form-item label="渠道:" labelWidth="200px">
          <v-checkbox-group v-model="channelList" class="check">
            <v-checkbox v-for="ichannel in channel" :key="ichannel.channelCode" v-bind:label='ichannel.channelCode'>{{ichannel.channelName}}</v-checkbox>
          </v-checkbox-group>
        </v-form-item>
        <v-form-item label="产品类型:" labelWidth="200px">
          <v-select v-if="$route.params.type!=2" v-model="patternType" :select-list="productTypeList"></v-select>
          <v-input v-if="$route.params.type==2" v-model="patternType" placeholder="" :disabled="allMark"></v-input>
        </v-form-item>
        <v-form-item label="产品大类分组:" labelWidth="200px">
          <v-select v-if="$route.params.type!=2" v-model="productGroup" :select-list="productGroupList"></v-select>
          <v-input v-if="$route.params.type==2" v-model="productGroup" placeholder="" :disabled="allMark"></v-input>
        </v-form-item>
        <v-form-item label="期限范围:" labelWidth="200px">
          <v-input class="termRange" v-model="term" placeholder="" :disabled="allMark"></v-input>
          <v-button size="small" type="primary" @on-click="addTerm" :disabled="allMark">添加</v-button>
          <v-button size="small" type="primary" @on-click="reset" :disabled="allMark">重置</v-button>
        </v-form-item>
        <v-form-item label="当前所选期数:" labelWidth="200px">
          <div id="tagContainer">
            <v-tag v-for="(item,index) in termNameList" :key="index">{{item}}</v-tag>
          </div>
        </v-form-item>
        <v-button v-if="$route.params.type!=2" class="bt" size="normal" type="primary" @on-click="conf" :disabled="confMark">确认</v-button>
        <div v-if="$route.params.type==2" class="middiv"></div>
        <v-button size="normal" class="bt" type="primary" @on-click="reback()">返回</v-button>
      </v-form>
    </div>
  </Card>
</template>

<script>
import api from '@/api'
export default {
  data () {
    return {
      confMark: false,
      allMark: false,
      productMark: false,
      titleMark: false,
      allTerm: '',
      term: '',
      titleCase: '',
      productName: '',
      loanMinAmount: '',
      loanMaxAmount: '',
      termList: [],
      termNameList: [],

      channelList: [],
      channel: [],

      patternType: '',
      productGroup: '',
      productTypeList: [
        {
          value: 'A',
          label: '线上'
        },
        {
          value: 'B',
          label: '线下'
        }
      ],
      productGroupList: [
        {
          value: 'C',
          label: '现金贷'
        },
        {
          value: 'S',
          label: '消费分期'
        }
      ]
    }
  },
  created () {
    var vm = this
    // type=1编辑,type=2查看
    if (vm.$route.params.type === 1 || vm.$route.params.type === 2) {
      // 查询产品大类信息
      api
        .searchProduct({ productType: vm.$route.params.productType })
        .then(re => {
          if (re.data.data.length > 0) {
            vm.productName = re.data.data[0].productTypeName
            vm.titleCase = re.data.data[0].titleCase
            vm.loanMinAmount = re.data.data[0].minAmount + ''
            vm.loanMaxAmount = re.data.data[0].maxAmount + ''
            // vm.channelList = re.data.data[0].minAmount;
            if (
              re.data.data[0].patternType === '线上产品' &&
              vm.$route.params.type === 1
            ) {
              vm.patternType = 'A'
            } else if (
              re.data.data[0].patternType === '线下产品' &&
              vm.$route.params.type === 1
            ) {
              vm.patternType = 'B'
            } else {
              vm.patternType = re.data.data[0].patternType
            }
            if (
              re.data.data[0].productGroup === '现金贷' &&
              vm.$route.params.type === 1
            ) {
              vm.productGroup = 'C'
            } else if (
              re.data.data[0].productGroup === '消费分期' &&
              vm.$route.params.type === 1
            ) {
              vm.productGroup = 'S'
            } else {
              vm.productGroup = re.data.data[0].productGroup
            }
          }
        })
        .catch(er => { })
      // 查询改产品对应的渠道和期数
      api
        .searchChannelAndTerm({ productType: vm.$route.params.productType })
        .then(re => {
          let cList = []
          for (let i = 0; i < re.data.data.channelList.length; i++) {
            cList.push(re.data.data.channelList[i].channelCode + '')
          }
          vm.channelList = cList
          for (let i = 0; i < re.data.data.termList.length; i++) {
            vm.termList.push(re.data.data.termList[i].term + '')
          }
          for (let i = 0; i < vm.termList.length; i++) {
            vm.termNameList.push(vm.termList[i] + '期')
          }
          // 查看所有渠道
          api
            .searchChannel()
            .then(re => {
              vm.channel = re.data.data
            })
            .catch(er => { })
        })
        .catch(er => { })
      if (vm.$route.params.type === 1) {
        vm.productMark = true
        vm.titleMark = true
      } else if (vm.$route.params.type === 2) {
        vm.productMark = true
        vm.titleMark = true
        vm.allMark = true
      }
    } else {
      api
        .searchChannel()
        .then(re => {
          vm.channel = re.data.data
        })
        .catch(er => { })
    }
    // 新增
  },
  methods: {
    reback () {
      var vm = this
      vm.$router.push('cplx')
    },
    conf () {
      var vm = this
      var r = /^\+?[1-9][0-9]*$/
      if (vm.productName.trim() === '') {
        this.$alert({ title: '提示', content: '产品名称不能为空' })
        return
      }
      if (vm.titleCase.trim() === '') {
        this.$alert({ title: '提示', content: '产品首字母大写名称不能为空' })
        return
      }
      if (vm.loanMinAmount.trim() === '') {
        this.$alert({ title: '提示', content: '最小金额不能为空' })
        return
      }
      if (vm.loanMaxAmount.trim() === '') {
        this.$alert({ title: '提示', content: '最大金额不能为空' })
        return
      }
      if (!r.test(vm.loanMinAmount.trim()) || !r.test(vm.loanMaxAmount.trim())) {
        this.$alert({ title: '提示', content: '金额输入不正确' })
        return
      }
      if (parseInt(vm.loanMinAmount.trim()) > parseInt(vm.loanMaxAmount.trim())) {
        this.$alert({ title: '提示', content: '最小金额应该小于最大金额' })
        return
      }
      if (vm.termList.length === 0) {
        this.$alert({ title: '提示', content: '请选择期限范围' })
        return
      }
      if (vm.channelList.length === 0) {
        this.$alert({ title: '提示', content: '请选择渠道' })
        return
      }
      if (vm.patternType.trim() === '') {
        this.$alert({ title: '提示', content: '产品类型不能为空' })
        return
      }
      if (vm.productGroup.trim() === '') {
        this.$alert({ title: '提示', content: '产品大类不能为空' })
        return
      }
      var param = {
        productType: vm.$route.params.productType,
        titleCase: vm.titleCase,
        productTypeName: vm.productName,
        minAmount: vm.loanMinAmount.trim(),
        maxAmount: vm.loanMaxAmount.trim(),
        termList: vm.termList,
        patternType: vm.patternType,
        productGroup: vm.productGroup,
        channelList: vm.channelList
      }
      if (!confirm('确认提交?')) {
        return
      }
      vm.confMark = true
      if (!vm.$route.params.type === 1) {
        api
          .productinsert(param)
          .then(re => {
            this.$alert({ title: '提示', content: re.data.data })
            vm.confMark = false
          })
          .catch(er => {
            vm.confMark = false
          })
      } else if (vm.$route.params.type === 1) {
        api
          .editConfirm(param)
          .then(re => {
            if (re.data.code === 'success') {
              this.$alert({ title: '提示', content: '成功' })
              vm.confMark = false
            }
            // this.$alert({ title: "提示", content: re.data.data });
          })
          .catch(er => {
            vm.confMark = false
          })
      }
      //   vm.$router.push({ name: "dkcpdetail", params:{channelList:vm.channelList,termList:vm.termList,gradeList:vm.gradeList}});
    },
    addTerm () {
      var vm = this
      var r = /^\+?[1-9][0-9]*$/
      if (!r.test(vm.term)) {
        this.$alert({ title: '提示', content: '输入期数不正确' })
        return
      }
      for (var i = 0; i < vm.termList.length; i++) {
        if (vm.termList[i] === vm.term) {
          this.$alert({ title: '提示', content: '期数已经存在' })
          return
        }
      }
      vm.termList.push(vm.term)
      vm.termNameList.push(vm.term + '期')
    },
    reset () {
      var vm = this
      vm.termList = []
      vm.termNameList = []
      vm.term = ''
    }
  }
}
</script>

<style lang="less">
.ll {
}
#middle {
  margin: 100px auto;
  width: 500px;
}
#middle .v-form-label {
  font-size: 15px;
}
#middle .versionNum {
  width: 80px;
}
#middle .channel {
  font-size: 12px;
}
.bt {
  margin: 10px 80px;
}
.check {
  display: inline-block;
}
.termRange {
  margin-right: 20px;
}
.v-tag {
  padding: 6px 10px;
  min-width: 10px;
}
#tagContainer {
  margin-top: 10px;
}
.middiv {
  display: inline-block;
  width: 118px;
}
</style>
